<template>
    <div>
        <section class="content-header clearfix">
            统计分析
            <span>&nbsp;&nbsp;>&nbsp;&nbsp;</span>分类统计
        </section>
        <section class="content-main clearfix">
            <div class="col-sm-4 clearfix">
                <label class="col-sm-3 control-label">创建时间：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker1" v-model="areaSortRateOut.eventTimeStart" @mousedown="selectDate1" placeholder="YYYY-MM-DD">
                    </div>
                </div>
                <div class="col-sm-1" style="height:34px;line-height:34px">--

                </div>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker2" v-model="areaSortRateOut.eventTimeEnd" @mousedown="selectDate2" placeholder="YYYY-MM-DD">
                    </div>
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-2 col-sm-offset-1">
                    <button type="button" class="btn btn-primary" @click="select">查询</button>
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-2 col-sm-offset-10">
                    <button type="button" class="btn btn-primary" @click="areaSortOut">导出</button>
                </div>
            </div>
        </section>
        <section class="clearfix">
            <div class="clearfix">
                <div class="col-sm-12" style="padding:20px 15px">
                    <table class="table-hover" border="1" style="font-size:18px">
                        <thead>
                            <tr class="title">
                                <th style="width:16%;">
                                    <div class="out">
                                        <b>事件类别</b>
                                        <em>片区</em>
                                    </div>
                                </th>
                                <th v-for="item in areaSortRateData[0].list" :key="item.value">{{item.eventName}}</th>
                                <th>合计</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in areaSortRateData" :key="item.value">
                                <td>{{item.areaName}}</td>
                                <td v-for="i in item.list" :key="i.value">
                                    {{i.numEvent}}({{i.numEventRate}})
                                </td>
                                <td>
                                    {{rowsTotal(item,'numEvent')}} ({{(rowsTotal(item,'numEvent')/total()*100).toFixed(2)}}%)
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td>合计</td>
                                <td v-for="(item,index) in areaSortRateData[0].list" :key="item.value">
                                    {{colsTotal(index,'numEvent')}} ({{(colsTotal(index,'numEvent')/total()*100).toFixed(2)}}%)
                                </td>
                                <td>{{total()}}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

            </div>
            <div class="clearfix" style="margin:0;">
                <div class="col-sm-6">
                    <div id="echartContainer1" style="width:100%; height:300px;padding:0 15px"></div>
                </div>
                <div class="col-sm-6">
                    <div id="echartContainer2" style="width:100%; height:300px;"></div>
                </div>

            </div>
            <div class="clearfix" style="margin:50px 0;">
                <div class="col-sm-12">
                    <div id="echartContainer3" style="width:100%; height:300px;"></div>
                </div>
            </div>

        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            areaSortRateData: [[]],
            tableData: [
                "waterPreAndQua",
                "waterMeter",
                "waterRepairs",
                "waterProblems",
                "otherEvent"
            ],
            all: [["product"]],
            pieData: [],
            areaSortRateOut: {
                eventTimeStart: utils.nowDate(-7),
                eventTimeEnd: utils.nowDate(0)
            },
            max: 0,
            myChart2Data: {
                value: [],
                indicator: []
            },
            myChart3: {}
        };
    },
    mounted() {
        this.select()
    },
    methods: {
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.areaSortRateOut.eventTimeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.areaSortRateOut.eventTimeEnd = ev.target.value;
                });
        },
        getAreaSortRate(callback) {
            this.$api.tongji.home.areaSortRate(this.areaSortRateOut).then(res => {
                if (res.success) {
                    this.areaSortRateData = res.data;
                    // console.log(this.areaSortRateData);
                    callback();
                }
            });
        },
        select() {

            var echarts = require("echarts");
            var myChart1 = echarts.init(
                document.getElementById("echartContainer1")
            );
            var myChart2 = echarts.init(
                document.getElementById("echartContainer2")
            );
            var myChart3 = echarts.init(
                document.getElementById("echartContainer3")
            );
            this.getAreaSortRate(() => {
                this.tableTotal();
                this.getPieData();
                this.getmyChart2Data();
                myChart1.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: "80%",
                            center: ["50%", "60%"],
                            data: this.pieData
                        }
                    ]
                });
                myChart2.setOption({
                    tooltip: {
                        trigger: "axis"
                    },
                    radar: [
                        {
                            indicator: this.myChart2Data.indicator,
                            radius: "60%",
                            center: ["50%", "60%"]
                        }
                    ],
                    series: [
                        {
                            type: "radar",
                            tooltip: {
                                trigger: "item"
                            },
                            data: [
                                {
                                    value: this.myChart2Data.value,
                                    name: "分类统计"
                                }
                            ],
                            itemStyle: {
                                normal: {
                                    color: "#3c8dbc"
                                }
                            }
                        }
                    ]
                });
                myChart3.setOption({
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: this.all
                    },
                    xAxis: { type: "category" },
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        { type: "bar" },
                        { type: "bar" },
                        { type: "bar" },
                        { type: "bar" },
                        { type: "bar" },
                        { type: "bar" },
                        { type: "bar" },
                        { type: "bar" }
                    ]
                });
            });
        },
        rowsTotal(item, obj) {
            let sum1 = 0;
            for (let subitem in item.list) {
                // console.log(obj)
                sum1 += parseFloat(item.list[subitem][obj]);
            }
            return sum1;
        },
        colsTotal(index, obj) {
            let sum2 = 0;
            for (let subitem in this.areaSortRateData) {
                // console.log(this.areaSortRateData)
                sum2 += parseFloat(this.areaSortRateData[subitem].list[index][obj]);
            }
            // console.log(this.areaSortRateData)

            return sum2;
        },
        total() {
            let sum = 0;
            for (let subitem in this.areaSortRateData[0].list) {
                // console.log(this.total(this.tableData[subitem]))
                sum += this.colsTotal(subitem, 'numEvent');
            }
            return sum;
        },
        getPieData() {
            this.pieData = []
            for (let item in this.areaSortRateData) {
                let arr = { value: "", name: "" };
                // console.log()
                arr.name = this.areaSortRateData[item].areaName;
                arr.value = this.rowsTotal(this.areaSortRateData[item], 'numEvent');
                this.pieData.push(arr);
            }
            // console.log(this.pieData);
        },
        tableTotal() {
            for (let item in this.areaSortRateData[0].list) {
                this.all[0].push(this.areaSortRateData[0].list[item].eventName)
            }
            for (let item in this.areaSortRateData) {
                let source = [];
                source.push(this.areaSortRateData[item].areaName);
                for (let subitem in this.areaSortRateData[item].list) {
                    source.push(
                        this.areaSortRateData[item].list[subitem].numEvent
                    );
                }
                this.all.push(source);

            }
            // console.log(this.all)

        },
        areaSortOut() {
            // console.log(this.areaSortRateOut);
            this.$api.tongji.home
                .areaSortRateOut(this.areaSortRateOut)
                .then(res => {
                    if (res.success) {
                        console.log(res);
                    }
                });
        },
        getmyChart2Data() {

            for (let item in this.areaSortRateData[0].list) {
                this.myChart2Data.value.push(this.colsTotal(item, 'numEvent'))
            }
            this.myChart2Data.indicator = []
            for (let item in this.areaSortRateData[0].list) {
                let msg1 = {
                    text: '', max: ''
                }
                // console.log(this.areaSortRateData[0].list[item])
                msg1.text = this.areaSortRateData[0].list[item].eventName
                msg1.max = Math.max.apply(null, this.myChart2Data.value)
                this.myChart2Data.indicator.push(msg1)
            }
            // console.log(this.myChart2Data)
            // console.log(Math.max.apply(null, this.myChart2Data.value))
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
  label,
  input,
  select,
  button {
    height: 34px;
    line-height: 34px;
    border-radius: 5px;
  }
  select,
  button {
    padding: 0px;
  }
  .col-sm-4,
  .col-sm-3,
  .col-sm-1,
  .col-sm-6,
  .col-sm-8 {
    padding: 0;
    text-align: center;
  }
}
table {
  .out {
    border-top: 50px #ecf0f5 solid; /*上边框宽度等于表格第一行行高*/
    border-left: 150px #ecf0f5 solid; /*左边框宽度等于表格第一行第一格宽度*/
    position: relative;
    color: black;
    b {
      font-style: normal;
      display: block;
      position: absolute;
      top: -60px;
      left: -140px;
      width: 200px;
    }
    em {
      font-style: normal;
      display: block;
      position: absolute;
      top: -40px;
      left: -215px;
      width: 200px;
    }
  }
}
</style>
